<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>教师课销记录1</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="./teacher/css/head.css">
    <link rel="stylesheet" href="./css/school_courses.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 黑体;
        }

        #vue-root {
            width: 100%;
            margin: 0 auto;
        }
		[v-cloak] {
		display: none;
	}
    </style>
</head>

<body>
    <div style="height: 40px;"></div>
    <div class="header">
        <div class="header_title">教师课销记录</div>
        <img src="image/return.png" alt="" class="return" onclick="history.back()">
    </div>
    <div id="vue-root" v-cloak>
        <div class="head_content_box">
            <div class="head_content_item">
                <div class="head_content">
                    <div class="head_content_text1">上课时间</div>
                    <div class="head_content_text2">
                        <input class="select_date" type="date" v-model="form.birthday" @change="fetchClassTime">
                    </div>
                </div>
                <div class="head_content">
                    <div class="head_content_text1">任课班级</div>
                    <div class="head_content_text2">
                        <select v-model="form.class" @change="fetchClassTime">
                            <option :value="undefined" disabled="disabled">请选择班级</option>
                            <option v-for="item in classList" v-text="item.name" :key="item.id" :value="item.id">
                            </option>
                        </select>
                    </div>
                </div>
                <div class="head_content">
                    <div class="head_content_text1">任课课程</div>
                    <div class="head_content_text2">
                        <select v-model="form.course" @change="fetchClassTime">
                            <option v-for="item in courseList" v-text="item.name" :key="item.id" :value="item.id">
                            </option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="my_course">
            <div class="my_course_left">
                任课课程时间
            </div>
            <div class="my_course_right head_content_text2">
                <select v-model="form.selectedClassTime" @change="fetchAttendanceRecords">
                    <option :value="undefined" disabled="disabled">请选择课程时间段</option>
					<option v-for="item in classListTime" :key="item.id" :value="item.id">
                        {{ item.startTime }} - {{ item.endTime }}
                    </option>
                </select>
            </div>
        </div>
        <div class="num_box">
            <div class="num_box_item">
                班级总人数<span>{{studentList.length+studentList2.length}}</span>
            </div>
            <div class="num_box_item">
                已签到人数<span>{{studentList.length }}</span>
            </div>
            <div class="num_box_item">
                未签到人数<span>{{studentList2.length}}</span>
            </div>
        </div>
        <div class="list_box" v-if="studentList.length || studentList2.length">
            <div class="list_item" v-for="item in studentList" :key="item.id">
                {{ item }}
            </div>
            <div class="list_item list_item_red" v-for="item in studentList2" :key="item.id">
                {{ item }}
            </div>
            <div class="zhushi">
                注：蓝色是已签到人数，红色是未签到人数。
            </div>
        </div>
        <div class="list_box" v-else>
            <div class="nulldata">
                暂无内容
            </div>
        </div>
    </div>

    <script src="/scriptZIP/vue.min.js"></script>
    <script src="/scriptZIP/axios.min.js"></script>
    <script src="/scriptZIP/dayjs.min.js"></script>

    <script src="/js/common.js"></script>

    <script>
        var schoolId = getPerson().schoolId;

        new Vue({
            el: '#vue-root',
            data: {
                form: {
                    birthday: dayjs().format('YYYY-MM-DD'),
                    class: undefined,
                    course: undefined,
                    selectedClassTime: undefined
                },
                classList: [],
                courseList: [],
                classListTime: [],
                studentList: [],
                studentList2: [],
            },
            created: function () {
                // 获取 sessionStorage 中的 hxt-teacher 值并解析为 JSON 对象
        this.teacherValue = JSON.parse(sessionStorage.getItem('hxt-teacher') || '{}');
        this.schoolId = this.teacherValue.schoolId;
        
        if (this.teacherValue.president) {
            // 如果是校长，获取所有班级和课程
                axios.get('/t/classes/all/' + schoolId).then(function (res) {
                    this.classList = res.data;
                    this.form.class = this.classList[0]?.id;
                    this.fetchClassTime(); // 在获取班级列表后立即获取课程时间段
                }.bind(this));
                axios.get('/t/course/all/' + schoolId).then(function (res) {
                    this.courseList = res.data;
                    this.form.course = this.courseList[0]?.id;
                    this.fetchClassTime(); // 在获取课程列表后立即获取课程时间段
                }.bind(this));
            }else{
                // 获取管理的班级和课程数据
                this.managedClassesAndCourses = JSON.parse(sessionStorage.getItem('managedClassesAndCourses') || '[]');
                    this.classList = this.managedClassesAndCourses.map(item => ({
                        id: item.classesId,
                        name: item.classesName
                    }));
                    this.form.class = this.classList[0]?.id;
                    this.courseList = this.managedClassesAndCourses.map(item => ({
                        id: item.courseId,
                        name: item.courseName
                    }));
                    this.form.course = this.courseList[0]?.id;
                    this.fetchClassTime(); // 在获取班级和课程后立即获取课程时间段
                }
            },
            methods: {
                fetchClassTime: function () {
                    if (!this.form.birthday || !this.form.class || !this.form.course) {
                        return;
                    }

                    const params = {
                        date: this.form.birthday,
                        lid: this.form.class,
                        cid: this.form.course
                    };

                    axios.get('/api/attendanceRecord/getLessTimes', { params: params })
                        .then(function (res) {
                            this.classListTime = res.data;
							this.form.selectedClassTime=this.classListTime[0]?.id;
							this.fetchAttendanceRecords();
                        }.bind(this))
                        .catch(function (error) {
                            console.error(error);
                        });
                },
				fetchAttendanceRecords: function () {
                    if (!this.form.selectedClassTime) {
                        return;
                    }

                    
                       var lessonTimeIds= this.form.selectedClassTime;
                        
                    axios.get('/api/attendanceRecord/getStudents/'+lessonTimeIds)
                        .then(function (res) {
                            this.studentList = res.data.signedInStudents;
							this.studentList2 = res.data.notSignedInStudents;
                        }.bind(this))
                        .catch(function (error) {
                            console.error(error);
                        });
                }
            }
        });
    </script>

</body>

</html>
